<div class="alarm-container">
  <aside class="alarm-aside">
    <app-device-tag-selector fxFlexFill
                             [deviceCategories]="deviceCategories"
                             [multipleFarm]="false"
                             [selectAGroup]='true'
                             [tagSet]="'01'"
                             [includeTagSelector]="false"
                             [defaultChooseDeviceCount]="defaultChooseDeviceCount"
                             (selectedDevicesChange)="onSelectedDevicesChange($event)">
    </app-device-tag-selector>
  </aside>
  <section class="alarm-main">
    <header class="alarm-main-query" fxLayout="row">
      <input type="text" class="divKR" [(ngModel)]="krCode" placeholder="请输入故障编码">
      <input type="text" class="divFaultDesc" [(ngModel)]="edDesc" placeholder="请输入描述">
      <select class="divAP" [(ngModel)]="faultLevelId" placeholder="报警级别" (ngModelChange)="apChange()">
        <option [value]="" selected>全部</option>
        <option [value]="1">故障</option>
        <option [value]="2">报警</option>
        <option [value]="3">状态</option>
        <option [value]="4">可复位</option>
        <option [value]="5">手动</option>
      </select>

      <section class="divTime" *ngIf="isShowTime==true">时间:
        <p-calendar [locale]="en" [(ngModel)]="startTime" showTime="showTime" hourFormat="24"></p-calendar>
        -
        <p-calendar [locale]="en" [(ngModel)]="endTime" showTime="showTime" hourFormat="24"></p-calendar>
      </section>
      <section>
        <button class="button-trend" *ngIf="isShowTime==true" (click)="queryAlarm()">确定</button>
        <button style="margin-left: 10px" class="button-trend" *ngIf="isShowTime==true" (click)="exportAlarmData()">导出
        </button>
      </section>
    </header>
    <div class="alarm-list alarm-flex">
      <header class="alarm-main-header">
          <span (click)=onClickHeader(0) [ngClass]="{on:active==0}">
            实时报警
          </span>
        <span (click)=onClickHeader(1) [ngClass]="{on:active==1}">
            历史报警
          </span>
      </header>
      <!--历史报警  [rows]="row"-->
      <section class="alarm-full alarm-main-content" *ngIf="active==0">
        <p-table [columns]="cols" [value]="alarmList" [paginator]="true" [rows]="rows" [showCurrentPageReport]="true"
                 [resizableColumns]="true" [(first)]="firstHis"
                 currentPageReportTemplate="显示 {{firstHis}} 到 {{firstHis+rows}} 共 {{alarmList.length}} 记录">
          <ng-template pTemplate="header" let-columns>
            <tr class="data-columns">
              <th style="width:4%;text-align: left" pResizableColumn>设备</th>
              <!--<th style="width:15%;text-align: left" pResizableColumn>型号</th>-->
              <!--<th style="width:15%;text-align: left" pResizableColumn>点名</th>-->
              <th style="width:15%;text-align: left" pResizableColumn>描述</th>
              <th style="width:10%;text-align: left" pResizableColumn>一级系统</th>
              <th style="width:10%;text-align: left" pResizableColumn>二级系统</th>
              <th style="width:10%;text-align: left" pResizableColumn>三级系统</th>
              <th style="width:8%;text-align: left" pResizableColumn>内容</th>
              <th style="width:5%;text-align: left" pResizableColumn>值</th>
              <th style="width:12%;text-align: left" pResizableColumn>开始时间</th>
              <th style="width:12%;text-align: left" pResizableColumn>结束时间</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-row let-columns="columns">
            <tr class="data-rows">
              <td class="ui-resizable-column">{{row.deviceName}}</td>
              <!--<td class="ui-resizable-column">{{row.modelName}}</td>-->
              <!--<td class="ui-resizable-column">{{row.GN}}</td>-->
              <td class="ui-resizable-column">{{row.faultDesc}}</td>
              <td class="ui-resizable-column">{{row.firstModule}}</td>
              <td class="ui-resizable-column">{{row.secondModule}}</td>
              <td class="ui-resizable-column">{{row.thirdModule}}</td>
              <td class="ui-resizable-column">{{row.faultLevelName}}</td>
              <td class="ui-resizable-column">{{row.multipleValue}}</td>
              <td class="ui-resizable-column">{{row.faultBeginTime}}</td>
              <td class="ui-resizable-column">{{row.faultEndTime}}</td>
            </tr>
          </ng-template>
          <ng-template pTemplate="emptymessage" let-columns>
            <tr>
              <td [attr.colspan]="columns.length" style="text-align: center">
                没有数据
              </td>
            </tr>
          </ng-template>
        </p-table>
      </section>
      <!--报警统计 [rows]="rowC" -->
      <section *ngIf="active==1">
        <p-table [columns]="cols" [value]="aalarmList" [paginator]="true" [rows]="rows" [showCurrentPageReport]="true"
                 [resizableColumns]="true" [(first)]="first"
                 currentPageReportTemplate="显示 {{first}} 到 {{first+rows}} 共 {{aalarmList.length}} 记录">
          <ng-template pTemplate="header" let-columns>
            <tr class="data-columns">
              <th style="width:4%;text-align: left" pResizableColumn>设备</th>
              <!--<th style="width:8%;text-align: left" pResizableColumn>型号</th>-->
              <!--<th style="width:15%;text-align: left" pResizableColumn>点名</th>-->
              <th style="width:15%;text-align: left" pResizableColumn>描述</th>
              <th style="width:10%;text-align: left" pResizableColumn>一级系统</th>
              <th style="width:10%;text-align: left" pResizableColumn>二级系统</th>
              <th style="width:10%;text-align: left" pResizableColumn>三级系统</th>
              <th style="width:8%;text-align: left" pResizableColumn>内容</th>
              <th style="width:5%;text-align: left" pResizableColumn>值</th>
              <th style="width:15%;text-align: left" pResizableColumn>开始时间</th>
              <th style="width:15%;text-align: left" pResizableColumn>结束时间</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-row let-columns="columns">
            <tr class="data-rows">
              <td class="ui-resizable-column">{{row.deviceName}}</td>
              <!--<td class="ui-resizable-column">{{row.modelName}}</td>-->
              <!--<td class="ui-resizable-column">{{row.GN}}</td>-->
              <td class="ui-resizable-column">{{row.faultDesc}}</td>
              <td class="ui-resizable-column">{{row.firstModule}}</td>
              <td class="ui-resizable-column">{{row.secondModule}}</td>
              <td class="ui-resizable-column">{{row.thirdModule}}</td>
              <td class="ui-resizable-column">{{row.faultLevelName}}</td>
              <td class="ui-resizable-column">{{row.multipleValue}}</td>
              <td class="ui-resizable-column">{{row.faultBeginTime}}</td>
              <td class="ui-resizable-column">{{row.faultEndTime}}</td>
            </tr>
          </ng-template>
          <ng-template pTemplate="emptymessage" let-columns>
            <tr>
              <td [attr.colspan]="columns.length" style="text-align: center">
                没有数据
              </td>
            </tr>
          </ng-template>
        </p-table>
      </section>
    </div>
  </section>
</div>

